<template>

    <div>

        <el-card shadow="always" style="text-align: center">
            司机薪资管理
        </el-card>

        <div class="shousuo">
            <el-autocomplete
                    class="inline-input"
                    v-model="state1"
                    :fetch-suggestions="querySearch"
                    placeholder="姓名"
                    @select="" style="margin-right: 10px;margin-left: 20px">
                <i
                        class="el-icon-search el-input__icon"
                        slot="suffix"
                        @click="">
                </i>
            </el-autocomplete>

            <el-button type="primary" round style="margin-right: 5px;margin-left: 60px" icon="el-icon-plus"
                       @click="InsertWages()">新增
            </el-button>
            <el-button type="danger" round style="margin-right: 5px;" icon="el-icon-delete"
                       @click="deleteAll()">删除
            </el-button>

        </div>
        <el-table :data="tableData"
                  v-loading="hhhh"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  border
                  style="width: 100%;margin-top: 20px"
                  stripe
                  :header-cell-style="tableHeaderColor"
                  @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55"
            >
            </el-table-column>


            <el-table-column
                    fixed
                    prop="name"
                    label="司机姓名"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="driverId"
                    label="驾驶车辆"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="size"
                    label="工资金额/元"
                    align="center"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="diSize"
                    label="底薪"
                    align="center"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="quanSize"
                    label="全勤"
                    align="center"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="buzhuSize"
                    label="补助"
                    align="center"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="日期"
                    align="center"
                    width="90"
            >
            </el-table-column>
            <el-table-column
                    prop="staffId"
                    label="经办人工号"
                    align="center"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="sec"
                    label="备注"
                    align="center"
                    width="100"
            >
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作" :formatter="formatter">
                <template slot-scope="scope">
                    <el-button type="success" round @click="updateWages(scope.row)">修改</el-button>
                    <el-button type="danger" round @click="deleteInfo(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="urlparam.num"
                :page-sizes="[15, 30, 60, 120]"
                :page-size="urlparam.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tabletotal">

        </el-pagination>


        <el-dialog title="修改薪资信息" :visible.sync="dialogUpdate" width="550px">

            <el-form :model="wagesForm"
                     element-loading-text="拼命加载中"
                     element-loading-spinner="el-icon-loading"
                     element-loading-background="rgba(0, 0, 0, 0.8)">

                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input disabled v-model="wagesForm.name" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="工资金额" :label-width="formLabelWidth">
                    <el-input v-model="wagesForm.size" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="底薪" :label-width="formLabelWidth">
                    <el-input v-model="wagesForm.diSize" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="全勤" :label-width="formLabelWidth">
                    <el-input v-model="wagesForm.quanSize" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="补助" :label-width="formLabelWidth">
                    <el-input v-model="wagesForm.buzhuSize" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="操作日期" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="wagesForm.date"
                            type="datetime"
                            placeholder="选择日期时间"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="操作员编号" :label-width="formLabelWidth">
                    <el-input v-model="wagesForm.staffId" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            style="width: 300px"
                            v-model="wagesForm.sec">
                    </el-input>
                </el-form-item>


            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdate = false">取 消</el-button>
                <el-button type="primary" @click="updateWagesSbmit(wagesForm.id)">确 定</el-button>
            </div>
        </el-dialog>

        <!--添加薪资对话框-->
        <el-dialog title="添加薪资信息" :visible.sync="dialogInsert" width="550px">

            <el-form :model="wagesForm"
                     element-loading-text="拼命加载中"
                     element-loading-spinner="el-icon-loading"
                     element-loading-background="rgba(0, 0, 0, 0.8)">

                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="wagesForm.name" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="工资金额" :label-width="formLabelWidth">
                    <el-input v-model="wagesForm.size" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="底薪" :label-width="formLabelWidth">
                    <el-input v-model="wagesForm.diSize" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="全勤" :label-width="formLabelWidth">
                    <el-input v-model="wagesForm.quanSize" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="补助" :label-width="formLabelWidth">
                    <el-input v-model="wagesForm.buzhuSize" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="操作日期" :label-width="formLabelWidth">
                    <el-input v-model="wagesForm.date" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="操作员编号" :label-width="formLabelWidth">
                    <el-input v-model="wagesForm.staffId" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            style="width: 300px"
                            v-model="wagesForm.sec">
                    </el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdate = false">取 消</el-button>
                <el-button type="primary" @click="">确 定</el-button>
            </div>
        </el-dialog>

    </div>


</template>

<script>
    export default {
        name: "DriverSalary",
        data() {
            return {
                hhhh: true,
                tableData: [],
                dialogUpdate: false,
                dialogInsert: false,
                loading: true,
                tabletotal: 0,
                urlparam: {
                    num: 1,
                    size: 15
                },
                wagesForm: {
                    id: '',
                    name: '',
                    size: '',
                    driverId: '',
                    diSize: '',
                    quanSize: '',
                    buzhuSize: '',
                    date: '',
                    staffId: '',
                    sec: '',

                },
                formLabelWidth: '130px',
            }
        },
        created() {
            this.getAll();
        },
        methods: {
            getAll() {
                this.$http({
                    url: '/wages/get',
                    method: 'GET',
                    params: this.urlparam
                }).then(result => {
                    console.log(result);
                    if (result.status == 200) {
                        this.tableData = result.data.list;
                        this.hhhh = false;
                        this.tabletotal = result.data.total;

                    } else {
                        this.$message({
                            showClose: true,
                            message: '发生了未知错误',
                            type: 'error'
                        })
                    }
                })
            },
            /*新增信息*/
            InsertWages() {
                this.dialogInsert=true
            },
            /*修改信息*/
            updateWages(data) {
                this.dialogUpdate = true
                this.wagesForm.id = data.id
                console.log(this.wagesForm.id)
                this.wagesForm.name = data.name
                this.wagesForm.driverId = data.driverId
                this.wagesForm.size = data.size
                this.wagesForm.diSize = data.diSize
                this.wagesForm.quanSize = data.quanSize
                this.wagesForm.buzhuSize = data.buzhuSize
                this.wagesForm.date = data.date
                this.wagesForm.staffId = data.staffId
                this.wagesForm.sec = data.sec
            },
            updateWagesSbmit(id) {
                this.dialogUpdate = false;
                console.log(this.wagesForm.id)
                this.$http({
                    url: '/wages/update',
                    method: 'PUT',
                    params: {
                        id: this.wagesForm.id,
                        size: this.wagesForm.size,
                        date: this.wagesForm.date,
                        staffId: this.wagesForm.staffId,
                        sec: this.wagesForm.sec,
                        diSize: this.wagesForm.diSize,
                        quanSize: this.wagesForm.quanSize,
                        buzhuSize: this.wagesForm.buzhuSize,

                    }

                }).then(result => {
                    console.log(result);
                    if (result.data > 0) {
                        this.$notify({
                            title: '成功',
                            message: '修改成功',
                            type: 'success'
                        })
                        this.getAll()

                    } else {
                        this.$notify({
                            title: '失败',
                            message: '未知错误',
                            type: 'error'
                        });
                    }
                })
            },

            deleteInfo(id) {
                console.log(id)
                this.$http({
                    url: '/wages/delete/' + id,
                    method: 'delete',

                }).then(result => {
                    if (result.status == 200) {
                        this.$message({
                            showClose: true,
                            message: '删除信息成功',
                            type: 'success'
                        });
                        this.getAll();
                    }
                })
            },
            deleteAll(){
                this.$confirm('此操作将永久删除['+this.multipleSelection.length+']条信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids='?';
                    this.multipleSelection.forEach(item=>{
                        ids+='list='+item.id+'&';
                    });
                    this.deleteRequest('/wages/deleteAll'+ids).then(resp=>{
                        console.log(resp)
                        if(resp.data>0){
                            this.getAll();
                            this.$notify({
                                title: '成功',
                                message: '批量删除成功',
                                type: 'success'
                            });
                        }else {
                            this.$notify({
                                title: '失败',
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            tableHeaderColor({rowIndex}) {
                if (rowIndex === 0) {
                    return 'background-color: lightblue;color: #fff;font-weight: 500;height:51px'
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                let va = [];
                this.multipleSelection.map(item => {
                    va.push(item.id)
                })
                console.log(va);
                this.list = va;
            },
            handleCurrentChange(val) {
                this.urlparam.num = val;
                if (this.order == null) {
                    this.getAll();
                } else if (this.order == 'descending') {
                    console.log(val);
                    this.getDec();
                } else if (this.order == 'ascending') {
                    this.getAsc();
                }
            },
            handleSizeChange(val) {
                this.urlparam.size = val;
                if (this.order == null) {
                    this.getAll();
                } else if (this.order == 'descending') {
                    console.log(val);
                    this.getDec();
                } else if (this.order == 'ascending') {
                    this.getAsc();
                }

            }

        }
    }
</script>

<style scoped>
    .shousuo {
        margin: 10px;
    }
</style>
